package myJs.cps.myTable

import myJs.myPkg.i18n.ReactI18next
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object DescLiCp {

  case class Props(onClickF: () => Unit, isActive: Boolean, isNumeric: Boolean = false)

  val component = FunctionalComponent[Props] { props =>

    val js.Tuple3(t, i18n, _) = ReactI18next.useTranslation()

    val liActive = if (props.isActive) {
      "active"
    } else ""
    val faCls = if (props.isNumeric) "fa-sort-numeric-down-alt" else "fa-sort-alpha-down-alt"
    li(className := s"myLi hasHover mySortLi ${liActive}",
      onClick := props.onClickF,
      span(className := "sortFa",
        i(className := s"fas ${faCls}")
      ),
      span(t("descendingSort"))
    )

  }

}
